// 获取节点
let tby = document.getElementsByClassName('tbody')[0]
let btn = document.getElementsByClassName('btn')[0]
let md_box = document.getElementById("md_box")
let bj_box = document.getElementById("bj_box")
let tspan = document.getElementsByClassName('tspan')[0]
let tspan_u = document.getElementsByClassName('tspan')[1]
let firm = document.getElementById('firm')
let firm_u = document.getElementById('firm_u')
let user_name = document.getElementsByClassName('user_name')[0]
let user_age = document.getElementsByClassName('user_age')[0]
let user_eth = document.getElementsByClassName('user_eth')[0]
let user_phone = document.getElementsByClassName('user_phone')[0]
let user_name_u = document.getElementsByClassName('user_name')[1]
let user_age_u = document.getElementsByClassName('user_age')[1]
let user_eth_u = document.getElementsByClassName('user_eth')[1]
let user_phone_u = document.getElementsByClassName('user_phone')[1]
let user_id = document.getElementsByClassName('user_id')[0]
    // console.log(user_phone)
    // 渲染页面
function fxhr() {
    var xhr = new XMLHttpRequest()
    xhr.open("get", "http://39.106.207.209:8100/clans/getClansList")
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            let clansList = JSON.parse(xhr.responseText)
                // console.log(clansList);
            let b = ''
            for (let i = 0; i < clansList.length; i++) {
                b += `<tr>
                    <td>${clansList[i].name}</td>
                    <td>${clansList[i].password}</td>
                    <td>${clansList[i].clansid}</td> 
                    <td>${clansList[i].phone}</td> 
                    <td>
                        <button onclick='ecom(${clansList[i].id})'>编辑</button>
                        <button onclick='deleteId(${clansList[i].id})'>删除</button>
                    </td>
                    </tr>`
            }
            tby.innerHTML = b
        }
    }
    xhr.send();
}
fxhr()
    // 编辑功能
function ecom(id) {
    bj_box.style.display = "block"
    bj_box.style.margin = "auto"
    var xhr = new XMLHttpRequest()
    xhr.open("get", "http://39.106.207.209:8100/clans/getClansById/" + id)
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            let clansList = JSON.parse(xhr.responseText)
            console.log(clansList);
            user_name_u.value = clansList.name
            user_age_u.value = clansList.password
            user_eth_u.value = clansList.clansid
            user_phone_u.value = clansList.phone
            user_id.value = clansList.id
        }
    }
    xhr.send()
}
// 点击编辑确定按钮事件   提交
firm_u.addEventListener('click', function() {
        var xhr = new XMLHttpRequest()
        xhr.open("put", "http://39.106.207.209:8100/clans/updateClans")
        xhr.setRequestHeader("Content-Type", "application/json")
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                let clansList = JSON.parse(xhr.responseText)
                    // console.log(clansList);
                fxhr()
                bj_box.style.display = "none"
            }
        }
        let obj = {
            id: user_id.value,
            clansid: 0,
            name: user_name_u.value,
            password: user_age_u.value,
            phone: user_phone_u.value
        }
        let a = JSON.stringify(obj)
        xhr.send(a)
    })
    // 删除功能
function deleteId(id) {
    var xhr = new XMLHttpRequest()
    xhr.open("delete", "http://39.106.207.209:8100/clans/deleteClansById/" + id)
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            let clansList = JSON.parse(xhr.responseText)
                // console.log(clansList);
            fxhr()
        }
    }
    xhr.send();
}
// 点击增加显示模态框
btn.addEventListener('click', function() {
        md_box.style.display = "block"
        md_box.style.margin = "auto"
    })
    // 点击按钮增加模态框关闭
tspan.addEventListener('click', function() {
        md_box.style.display = "none"
    })
    // 点击按钮编辑模态框关闭
tspan_u.addEventListener('click', function() {
        bj_box.style.display = "none"
    })
    // 点击模态框的确定按钮增加数据  新增提交
firm.addEventListener('click', function() {
    var xhr = new XMLHttpRequest()
    xhr.open("post", "http://39.106.207.209:8100/clans/addClans")
    xhr.setRequestHeader("Content-Type", "application/json")
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            let clansList = JSON.parse(xhr.responseText)
            fxhr()
            md_box.style.display = "none"
        }
    }
    let a = {
        clansid: "1",
        name: user_age.value,
        password: user_eth.value,
        phone: user_phone.value
    }
    let b = JSON.stringify(a)
    xhr.send(b);
})